<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css.css">
    <link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>注册</title>
    <style>
        #top{
            width: 100%;
            background-color: #f1f1f1;
            border-bottom: 1px solid #e0e0e0;
        }
        #top .top_middle{
            width: 1200px;
            margin: 0 auto;
        }
        #top .top_middle .top_middle_left{
            float: left;
        }
        #top .top_middle .top_middle_left .top_middle_left_one{
            display: inline-block;
            padding: 5px;
            padding-right: 15px;
            margin-right: 15px;
            position: relative;
            border-right: 1px solid #e0e0e0;
        }
        #top .top_middle .top_middle_left .top_middle_left_one .top_middle_left_one_hidden{
            display: none;
            position: absolute;
            top: 30px;
            left: 0px;
            background-color: white;
        }
        #top .top_middle .top_middle_left .top_middle_left_one:hover{
            background-color: white;
            border-left: 1px solid #e0e0e0;
            border-right: 1px solid #e0e0e0;
        }
        #top .top_middle .top_middle_left .top_middle_left_one:hover span.only{
            color: #f60;
        }
        #top .top_middle .top_middle_left .top_middle_left_one:hover i.two{
            transform: rotate(180deg);
        }
        #top .top_middle .top_middle_left .top_middle_left_one:hover .top_middle_left_one_hidden{
            display: inline-block;
        }
        #top .top_middle .top_middle_left .top_middle_left_one .top_middle_left_one_hidden .top_middle_left_one_hidden_top{
            width: 122px;
            padding: 10px;
            text-align: center;
            border-left: 1px solid #e0e0e0;
            border-right: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
        }
        #top .top_middle .top_middle_left .top_middle_left_one .top_middle_left_one_hidden .top_middle_left_one_hidden_top img{
            width: 100%;
        }
        #top .top_middle .top_middle_left a:hover{
            color: #f60 !important;
            text-decoration: none;
        }

        #top .top_middle .top_middle_right{
            float: right;
        }
        #top .top_middle .top_middle_right .top_middle_right_one{
            display: inline-block;
            padding: 5px;
            position: relative;
            color: #767676;
            border-right: 1px solid #e0e0e0;
        }
        #top .top_middle .top_middle_right span:hover{
            color: #f60 !important;
        }
        #top .top_middle .top_middle_right li:hover i.glyphicon-chevron-down{
            transform: rotate(180deg);
        }
        #top .top_middle .top_middle_right .top_middle_right_one:hover{
            background-color: white;
        }
        #top .top_middle .top_middle_right .top_middle_right_one:hover .top_middle_right_one_hidden{
            display: inline-block;
        }
        #top .top_middle .top_middle_right .top_middle_right_one .top_middle_right_one_hidden p:hover{
            color: #f60;
        }
        #top .top_middle .top_middle_right .top_middle_right_one .top_middle_right_one_hidden{
            display: none;
            position: absolute;
            top: 30px;
            left: 0px;
            background-color: white;
            width: 100px;
            padding: 10px;
            text-align: center;
            border-left: 1px solid #e0e0e0;
            border-right: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
        }
        #top .top_middle .top_middle_right .top_middle_right_two{
            display: inline-block;
            padding: 5px;
            position: relative;
            color: #767676;
            border-right: 1px solid #e0e0e0;
        }
        #top .top_middle .top_middle_right .top_middle_right_two:hover{
            background-color: white;
        }
        #top .top_middle .top_middle_right .top_middle_right_two:hover .top_middle_right_one_hidden{
            display: inline-block;
        }
        #top .top_middle .top_middle_right .top_middle_right_two .top_middle_right_one_hidden p:hover{
            color: #f60;
        }
        #top .top_middle .top_middle_right .top_middle_right_two .top_middle_right_one_hidden{
            display: none;
            position: absolute;
            top: 30px;
            right: 0px;
            background-color: white;
            width: 100px;
            padding: 10px;
            text-align: center;
            border-left: 1px solid #e0e0e0;
            border-right: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
        }




        #header{
            width: 100%;
            min-width: 1200px;
            height: 80px;
            padding: 30px 0 20px;
            background: #fff;
        }
        #header .head{
            width: 1200px;
            height: 80px;
            margin: 0 auto;
        }
        .headLogo{
            width: 208px;
            height: 80px;
            float: left;
        }
        .headLogo h1 a{
            display: block;
            width: 208px;
            height: 80px;
            line-height: 80px;
            text-indent: -999em;
            background: url('./imgs/3.png') no-repeat center center;
        }
        .logoFont{
            height: 30px;
            line-height: 30px;
            float: left;
            padding: 25px 0 25px 30px;
            font-size: 21px;
        }
        .headTel{
            width: 192px;
            float: right;
            padding: 12px 0 18px 50px;
            line-height: 25px;
            position: relative;
        }
        .headTel i{
            position: absolute;
            left: 0;
            top: 28px;
            display: inline-block;
            font-size: 40px;
            color: #a9a9a9;
        }
        .headTel h3{
            font-size: 14px;
            font-weight: normal;
            color: #666;
            text-align: left;
        }
        .headTel p{
            font-size: 26px;
            color: #e02445;
        }





        #formTop{
            width: 1110px;
            height: 90px;
            padding-top: 60px;
            margin: 0 auto;
        }
        #formTop .show_step{
            width: 100%;
            height: 30px;
            overflow: hidden;
        }
        #formTop .show_step dd{
            width: 370px;
            float: left;
            line-height: 30px;
            text-align: center;
        }
        #formTop .lineImg{
            width: 100%;
            height: 20px;
            margin: 20px auto;
            background: url('./imgs/nb1.png') no-repeat;
        }





        #regsiterForm .form{
            width: 1000px;
            margin: 50px auto;
            background: #fff;
            font-size: 14px;
            padding-top: 20px;
        }
        .formTab{
            width: 745px;
            margin: 20px auto;
            display: table;
            clear: both;
        }
        .formTab .formLeft{
            display: block;
            float: left;
            width: 219px;
            height: 37px;
            color: #4d4d4d;
            line-height: 37px;
            text-align: right;
        }
        .formTab .formLeft span{
            color: #e02445;
        }
        .formTab .formRight{
            width: 515px;
            float: left;
            font-size: 12px;
            margin-left: 11px;
            line-height: 37px;
            color: #999;
            position: relative;
        }
        .formTab .formRight input{
            width: 280px;
            height: 37px;
            background-color: #fff;
            background-image: none;
            border: 1px solid #e5e6e7;
            border-radius: 2px;
            font-size: 12px;
            padding: 0px 10px;
            color: #999;
        }
        .formTab .formRight input.w267{
            width: 14px;
            height: 14px;
            background-color: #fff;
            background-image: none;
            border: 1px solid #e5e6e7;
            border-radius: 2px;
            font-size: 12px;
            padding: 0px 10px;
            color: #999;
        }






        #formBtn{
            width: 100%;
            border-top: 1px solid #e7e7e7;
            height: 85px;
            line-height: 85px;
            text-align: center;
        }
        #formBtn .registOk{
            background: #999;
            padding: 10px 90px;
            color: #fff;
            font-size: 16px;
            border-radius: 3px;
            border: none;
            cursor: pointer;
        }





        #stick_left{
            width: 240px;
            position: absolute;
            top: 60%;
            left: 10px;
            background-color: white;
            border: 1px solid #999;
            box-shadow: 0 0 5px #555;
            z-index: 1052502;
        }
        .stick_up{
            width: 100%;
            background-color: #4e6ef2;
            padding: 10px;
        }
        .stick_up span{
            float: left;
            color: white;
        }
        .stick_up i{
            float: right;
            color: #e0e0e0;
        }
        .stick_lower{
            width: 100%;
            padding: 10px;
        }
        .stick_lower .first{
            width: 100%;
            height: 70px;
            border: 1px solid #999;
        }
        .stick_lower input{
            width: 100%;
            text-align: left;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: wrap;
            border: none;
        }
        .other{
            width: 100%;
            height: 20px;
            margin: 10px 0;
            border: 1px solid #a9a9a9;
        }
        .other i{
            color: #a9a9a9;
        }
        .other input{
            width: 80%;
            margin-left: 5px;
        }




        #stick_right{
            width: 144px;
            height: 52px;
            background-color: #00AEF3;
            position: absolute;
            top: 50%;
            right: 0;
        }
        #stick_right .back{
            width: 140px;
            height: 50px;
            background-image: url('./imgs/5s5s.png');
            background-size: 100%;
        }





        #footerBox{
            width: 100%;
            min-width: 1200px;
            padding: 40px 0;
            background: #1b1b1b;
            position: absolute;
            bottom: 0;
        }
        #footerBox .footer{
            width: 1200px;
            margin: 0 auto;
        }
        #footerBox .footer .footerTop{
            height: auto;
            overflow: hidden;
            padding-bottom: 40px;
            color: #a0a0a0;
        }
        #footerBox .footer .footNav{
            height: 24px;
            line-height: 24px;
            padding-top: 6px;
        }
        #footerBox .footer .footNav a{
            color: #6e6e6e;
            margin: 0 12px;
        }
        #footerBox .footer .footNav a:hover{
            text-decoration: none;
            color: #e02445;
        }
        #footerBox .footer .footNav a.qqChat3{
            margin: 0 0 0 15px;
        }
        #footerBox .footer .footNav a.qqChat3 i{
            display: inline-block;
            font-size: 0;
            overflow: hidden;
            margin-right: 2px;
            vertical-align: middle;
            background-image: url('./imgs/1-2.png');
            background-repeat: no-repeat;
            width: 18px;
            height: 18px;
            background-position: 0 0;
            margin-top: -4px;
        }
        #footerBox .footer .footNav a.footIco{
            margin: 0 0 0 15px;
        }
        #footerBox .footer .footNav a.footIco i{
            font-size: 0;
            width: 18px;
            height: 18px;
            background-position: 0 -18px;
            overflow: hidden;
            margin-right: 2px;
            vertical-align: middle;
            background-image: url('./imgs/1-2.png');
            background-repeat: no-repeat;
            display: inline-block;
        }
        #footerBox .footer .footCopyright{
            text-align: center;
            color: #6e6e6e;
            line-height: 36px;
        }
        #footerBox .footer .footCopyright .bianHao{
            color: #999;
        }
        #footerBox .footer .footCopyright .beiAn{
            color: #333;
        }

        #footerBox .footer .footFriend{
            height: 31px;
            padding-top: 10px;
            text-align: center;
        }
        #footerBox .footer .footFriend .iso{
            width: 88px;
            height: 31px;
            display: inline-block;
            background-image: url('./imgs/d4.png');
            opacity: .6;
            margin-right: 4px;
        }
        #footerBox .footer .footFriend .iso:hover{
            opacity: 1;
        }
        #footerBox .footer .footFriend .isoa{
            background-position: 0 0;
        }
        #footerBox .footer .footFriend .isoa:hover{
            background-position: 0 -31px;
        }
        #footerBox .footer .footFriend .isos{
            width: 87px;
            background-position: -92px 0;
        }
        #footerBox .footer .footFriend .isod{
            width: 87px;
            background-position: -182px 0;
        }
        #footerBox .footer .footFriend .isof{
            width: 107px;
            background-position: -272px 0;
        }
        #footerBox .footer .footFriend .isog{
            background-position: -383px 0;
        }
        #footerBox .footer .footFriend .isoh{
            width: 95px;
            background-position: -474px 0;
        }
        #footerBox .footer .footFriend .isop{
            background-image: url('./imgs/da.png');
            background-position: -436px 0;
        }
    </style>
</head>
<body>
    <div id="top">
        <div class="top_middle">
            <ul class="top_middle_left">
                <li class="top_middle_left_one">
                    <i class="glyphicon glyphicon-phone" style="color: #dc2a49;"></i>
                    <span class="only">手机站</span>
                    <i class="two glyphicon glyphicon-chevron-down" style="color: #a1a0a7;"></i>
                    <div class="top_middle_left_one_hidden">
                        <div class="top_middle_left_one_hidden_top">
                            <img src="./imgs/1.jpg" alt="">
                            <p>手机站</p>
                        </div>
                        <div class="top_middle_left_one_hidden_top">
                            <img src="./imgs/2.jpg" alt="">
                            <p>小程序</p>
                        </div>
                    </div>
                </li>
                <span style="color: #767676;margin-right: 20px;">欢迎来到企汇网</span>
                <i class="glyphicon glyphicon-user" style="color: #dc2a49;"></i>
                <a href="#" style="color: #767676; padding-right: 10px; margin-right: 10px; border-right: 1px solid #767676;">登录</a>
                <a href="#" style="color: #767676;">注册</a>
            </ul>

            <ul class="top_middle_right">
                <span style="color: #767676; margin-right: 8px; padding-right: 8px; border-right: 1px solid #e0e0e0;">企汇网首页</span>
                <li class="top_middle_right_one">
                    <span>收藏夹</span>
                    <i class="glyphicon glyphicon-chevron-down"></i>
                    <div class="top_middle_right_one_hidden">
                        <p>收藏的产品</p>
                        <p>收藏的店铺</p>
                    </div>
                </li>
                <li class="top_middle_right_one">
                    <span>我是采购商</span>
                    <i class="glyphicon glyphicon-chevron-down"></i>
                    <div class="top_middle_right_one_hidden">
                        <p>采购商中心</p>
                        <p>发布采购单</p>
                        <p>采购管理</p>
                    </div>
                </li>
                <li class="top_middle_right_one">
                    <span>我是供应商</span>
                    <i class="glyphicon glyphicon-chevron-down"></i>
                    <div class="top_middle_right_one_hidden">
                        <p>供应商中心</p>
                        <p>发布产品</p>
                        <p>产品管理</p>
                        <p>店铺管理</p>
                    </div>
                </li>
                <span style="color: #767676; margin-right: 8px; padding-right: 8px; border-right: 1px solid #e0e0e0;">企汇管家</span>
                <li class="top_middle_right_one">
                    <span>企汇服务</span>
                    <i class="glyphicon glyphicon-chevron-down"></i>
                    <div class="top_middle_right_one_hidden" style="width: 220px; text-align: left;">
                        <p>热门服务</p>
                        <div style="display: inline-block;">
                            <p>标王</p>
                            <p>黄金展位</p>
                            <p>热门推荐广告位</p>
                            <p>图片空间</p>
                        </div>
                        <div style="display: inline-block;">
                            <p>信息包</p>
                            <p>企汇金铺</p>
                            <p>金铺装修</p>
                            <p>更多服务</p>
                        </div>
                    </div>
                </li>
                <li class="top_middle_right_one">
                    <span>客服中心</span>
                    <i class="glyphicon glyphicon-chevron-down"></i>
                    <div class="top_middle_right_one_hidden">
                        <p>收藏的产品</p>
                        <p>收藏的店铺</p>
                    </div>
                </li>
                <li class="top_middle_right_two">
                    <i class=" 	glyphicon glyphicon-th-large" style="color: #dc2a49;"></i>
                    <span>网站导航</span>
                    <i class="glyphicon glyphicon-chevron-down"></i>
                    <div class="top_middle_right_one_hidden" style="width: 280px; text-align: left;">
                        <ul style="border-bottom: 1px solid #555; margin-top: 10px;">
                            <p style="color: #555;">特色服务</p>
                            <div>
                                <p style="display: inline-block;">企汇管家</p>
                                <p style="display: inline-block;">企汇云信</p>
                                <p style="display: inline-block;">企汇软文通</p>
                                <p style="display: inline-block;">企业库</p>
                            </div>
                            <div>
                                <p style="display: inline-block;">企业直通车</p>
                                <p style="display: inline-block;">手机站</p>
                                <p style="display: inline-block;">企业直通车</p>
                                <p style="display: inline-block;">产品库</p>
                            </div>
                            <div>
                                <p style="display: inline-block;">搜索</p>
                                <p style="display: inline-block;">百度爱采购</p>
                            </div>
                        </ul>
                        <ul style="border-bottom: 1px solid #555; margin-top: 10px;">
                            <p style="color: #555;">采购服务</p>
                            <div>
                                <p style="display: inline-block;">发布采购单</p>
                                <p style="display: inline-block;">采购中心</p>
                            </div>
                        </ul>
                        <ul style="border-bottom: 1px solid #555; margin-top: 10px;">
                            <p style="color: #555;">行业市场</p>
                            <div>
                                <p style="display: inline-block;">机械频道</p>
                                <p style="display: inline-block;">农林频道</p>
                                <p style="display: inline-block;">建材频道</p>
                            </div>
                        </ul>
                    </div>
                </li>
            </ul>
            <p style="clear: both; display: block;margin: 0;"></p>
        </div>
    </div>



    <div id="header">
        <div class="head">
            <div class="headLogo">
                <h1>
                    <a href="">企汇网</a>
                </h1>
            </div>
            <div class="logoFont">会员注册</div>
            <div class="headTel">
                <i class="glyphicon glyphicon-earphone"></i>
                <h3>客服电话</h3>
                <p>400-6677-369</p>
            </div>
        </div>
    </div>



    <div id="formTop">
        <dl class="show_step">
            <dd>验证手机号</dd>
            <dd>填写账号信息</dd>
            <dd>注册成功</dd>
        </dl>
        <div class="lineImg"></div>
    </div>



    <form id="regsiterForm" method="post">
        <div id="regstep1" class="form">
            <dl class="formTab">
                <dd class="formLeft">
                    <span>*</span>
                    请输入手机号
                </dd>
                <dd class="formRight">
                    <input class="w268" type="text" name="BindMobile" id="mb" placeholder="请输入手机号码">
                </dd>
            </dl>
            <dl class="formTab">
                <dd class="formLeft">
                    <span>*</span>
                    验证码
                </dd>
                <dd class="formRight">
                    <img style="width: 280px;height:37px;" src="./imgs/ppppppp.png" alt="">
                </dd>
            </dl>
            <dl class="formTab">
                <dd class="formLeft">
                    <span>*</span>
                    手机验证码
                </dd>
                <dd class="formRight">
                    <input class="w268" type="text" name="BindMobile" id="mb" placeholder="请输入手机号码">
                </dd>
            </dl>
            <dl class="formTab">
                <dd class="formLeft"></dd>
                <dd class="formRight">
                    <label>
                        <input class="w267" type="checkbox" name="" id="cbagree">我已阅读并同意</label>
                        <a href="http://help.qihuiwang.com/about/law.html" target="_blank" class="on">《企汇网服务条款》</a>
                </dd>
            </dl>
            <dl class="formBtn"></dl>
        </div>
    </form>




    <div id="formBtn">
        <input type="button" id="btnnext" value="下一步" class="registOk on " disabled="disabled">
    </div>




    <div id="stick_left">
        <div class="stick_up">
            <span>留言板</span>
            <i class="glyphicon glyphicon-minus"></i>
            <p style="clear: both; display: block;"></p>
        </div>
        <div class="stick_lower">
            <p class="first"><input type="text" placeholder="请在此输入留言内容，我们会尽快与您联系。（必填）"></p>
            <p class="other"><i class="glyphicon glyphicon-user"></i><input type="text" placeholder="姓名"></p>
            <p class="other"><i class="glyphicon glyphicon-earphone"></i><input type="text" placeholder="电话"></p>
            <p class="other"><i class="glyphicon glyphicon-map-marker"></i><input type="text" placeholder="地址"></p>
            <p class="other"><i class="glyphicon glyphicon-envelope"></i><input type="text" placeholder="邮箱"></p>
        </div>
    </div>



    <div id="stick_right">
        <div class="back"></div>
    </div>


    <div id="footerBox">
        <div class="footer">
            <div class="footerTop">
                <li class="footNav">
                    <a href="">网站首页</a>
                    |
                    <a href="">关于我们</a>
                    |
                    <a href="">联系我们</a>
                    |
                    <a href="">使用协议</a>
                    |
                    <a href="">版权隐私</a>
                    |
                    <a href="">产品资讯</a>
                    |
                    <a href="">产品动态</a>
                    |
                    <a href="">维权通道</a>
                    |
                    <a href="">网站导航</a>
                    |
                    <a href="">用户反馈 </a>
                    |
                    <a class="qqChat3" href="">
                        <span>在线客服:</span>
                        <i></i>
                    </a>
                    <a class="footIco" href="">
                        <span>关注我们:</span>
                        <i></i>
                    </a>
： 
                </li>
                <li class="footCopyright">
                    Copyright 2008-2018 河南企汇网信息技术股份有限公司  保留所有权利    经营许可证编号：
                    <span class="bianHao">
                        <a href="">豫B2-20140075-18</a>
                    </span>
                    <span class="beiAn">豫公网安备 41019702002055号</span>
                </li>
                <li class="footFriend">
                    <span class="iso isoa"></span>
                    <span class="iso isos"></span>
                    <span class="iso isod"></span>
                    <span class="iso isof"></span>
                    <span class="iso isog"></span>
                    <span class="iso isoh"></span>
                    <a class="iso isop" href=""></a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>